<%--
  Created by IntelliJ IDEA.
  User: 70481
  Date: 2019/9/6
  Time: 12:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>科室信息</title>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>

    <script>

        layui.use('laydate', function(){
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#test1', //指定元素
                format:'yyyy-MM-dd'
            });
        });
        layui.use(['table','form','layer'],function(){
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;

            // 初始化表格
            table.render({
                elem: '#myTable'
                ,url: 'selectPatient' //数据接口
                ,page: true //开启分页
                ,toolbar:"#myDiv"
                ,defaultToolbar:[]
                ,cols: [[ //表头
                    {checkbox:"checkbox"},
                    {field: 'patientId', title: '编号',width:60}
                    ,{field: 'patientName', title: '患者名字',width:80}
                    ,{field: 'patientBirth', title: '性别',templet:"#titleTpl",width:60}
                    ,{field: 'patientBirth', title: '患者生日'}
                    ,{field: 'patientIdcard', title: '身份证号'}
                    ,{field:"patientAddress",title:"家庭住址"}
                    ,{field:"patientMobile",title:"手机号码"}
                    ,{toolbar:"#myToolbar", title: '操作'}
                ]]
            })
            // toolbar监听

            table.on("tool(myTable)",function (obj) {
                // 获取点击的按钮的avent和当前的行数据

                var params = obj.data;
                var event = obj.event;
                // alert(event)
                // console.log(params)
                if(event === "update"){
                    // 修改操作
                    add()
                    form.val("myDepartment",{
                        patientId:params.patientId,
                        patientName:params.patientName,
                        patientSex:params.patientSex,
                        patientBirth:params.patientBirth,
                        patientIdcard:params.patientIdcard,
                        patientAddress:params.patientAddress,
                        patientMobile:params.patientMobile
                    })
                }

                if (event === "delete"){
                    // 删除操作
                    var array = new Array(1);
                    array[0] = params.patientId;
                    $.ajax({
                        url:"deletePatient",
                        traditional:true,
                        data:{"array":array},
                        success:function(data){
                            layer.alert(data.isSuccess,{time:1250})
                            layer.closeAll("page");
                            table.reload("myTable");
                        }
                    })
                }

                if(event ==="register"){
                    // 去后台查询数据并返回
                    $.ajax({
                        url:"selectRegisterDepartment",
                        success:function (data) {
                            console.log(data)
                            // 先将复选框中的内容置为空
                            $("#select").html("");
                            // 成功之后显示当前信息，有多少科室等等 form表单的回显
                            for(var i = 0;i < data.length;i++){
                                $("#select").append("<option value=\""+data[i].departmentId+"\">"+data[i].departmentName+"</option>")
                            }
                            form.val("registerForm",{
                                "triagePatientId":params.patientId,
                                "patientName":params.patientName
                            })

                            // 弹出层
                            layer.open({
                                type: 1,
                                offset: "t",
                                anim: 1,
                                area:['100%','100%'],
                                skin:"layui-layer-molv",
                                maxmin:true,
                                content: $("#registerForm")
                            })
                        }
                    })

                }
            })


            // form表单提交

            form.on("submit(formDemo)",function (data) {
                var params = data.field;
                if(params.patientId ===''){
                    // 添加操作
                    $.ajax({
                        url:"insertPatient",
                        data:params,
                        success:function (data) {
                            layer.alert(data.isSuccess,{time:1250});
                            // 关闭淡出层 删除表单
                            layer.closeAll("page");
                            table.reload("myTable")
                        }
                    })
                }else{
                    // 修改操作
                    $.ajax({
                        url:"updatePatient",
                        data:params,
                        success:function (data) {
                            layer.alert(data.isSuccess,{time:1250});
                            layer.closeAll("page");
                            table.reload("myTable");
                        }
                    })
                }
                return false;
            })


            form.on("submit(register)",function(data){
                // 获取当前表单的数据
                // alert(123)
                console.log(data.field)
                var params = data.field;
                $.ajax({
                    url:"addTriage",
                    data:params,
                    success:function (data) {
                        layer.alert(data.isAdd,{time:1250});
                        layer.closeAll("page");
                    }
                })
                return false;
            })




        })

        // 模糊查询
        function vague() {
            // 获取输入框中的内容
            var param = $("#vague").val();
            // alert(param)
            var table = layui.table;
            // 表单重载
            table.reload("myTable",{
                where:{"name":param}
            })
        }

        function add() {
            // 弹出表单
            var layer = layui.layer;
            // 表单内容重置
            $("#myDepartment")[0].reset();
            layer.open({
                type: 1,
                offset: "t",
                anim: 1,
                area:'600px',
                content: $("#myDepartment")
            })
        }

        // 批量删除

        function multiDelete() {
            // 获取所有被选中的数据
            // alert(12123)
            var table = layui.table;
            var layer = layui.layer;
            var params = table.checkStatus("myTable");
             console.log(params)
            var array = new Array(params.data.length)
            for(var i = 0;i < params.data.length;i++){
                array[i] = params.data[i].patientId;
            }
            console.log(array)
            $.ajax({
                url:"deletePatient",
                data:{"array":array},
                traditional:true,
                success:function (data) {
                    layer.alert(data.isSuccess,{time:1250});
                    table.reload("myTable");
                }
            })
        }
    </script>
    <script type="text/html" id="titleTpl">
        {{#  if(d.patientSex ==1){ }}
        (男)
        {{#  } else { }}
        (女)
        {{#  } }}
    </script>

</head>
<body>
<table id="myTable" lay-filter = "myTable"></table>
<%--toolbar  自定义的工具栏模板--%>
<script type="text/html" id="myToolbar">
        <button type="button" class="layui-btn layui-btn-radius layui-btn-warm layui-btn-sm" lay-event="update" id="update">修改</button>
        <button type="button" class="layui-btn layui-btn-radius layui-btn-danger layui-btn-sm" lay-event="delete" id="delete">删除</button>
        <button type="button" class="layui-btn layui-btn-radius layui-btn-danger layui-btn-sm" lay-event="register" id="register">挂号</button>
</script>

<%--行内菜单  用于table的表头--%>
    <div id="myDiv" style="display: none">
        <button type="button" class="layui-btn layui-btn-radius layui-btn-warm layui-btn-sm" lay-event="update" id="add" onclick="add()">
            <i class="layui-icon layui-icon-add-circle"></i>添加</button>
        <button type="button" class="layui-btn layui-btn-radius layui-btn-danger layui-btn-sm" lay-event="delete" id="multiDele" onclick="multiDelete()">
            <i class="layui-icon layui-icon-delete"></i>批量删除</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="text" name="name"  id="vague" placeholder="请输入要查询的科室名称">
        <button  class="layui-btn layui-btn-radius layui-btn-primary layui-btn-xs" lay-filter="sub" >
            <i class="layui-icon layui-icon-search"  onclick="vague()">搜索</i>
        </button>
    </div>


<%--弹出层--%>
<form class="layui-form" action="" style="display: none" id="myDepartment" lay-filter="myDepartment">
    <input type="hidden" name="patientId">
    <div class="layui-form-item">
        <label class="layui-form-label">患者名称</label>
        <div class="layui-input-block">
            <input type="text" name="patientName" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">患者性别</label>
        <div class="layui-input-block">
            <input type="radio" name="patientSex" value="1" title="男">
            <input type="radio" name="patientSex" value="0" title="女">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">患者生日</label>
        <div class="layui-input-block">
            <input type="text" name="patientBirth" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" id="test1">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">患者身份证号</label>
        <div class="layui-input-block">
            <input type="text" name="patientIdcard" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">家庭住址</label>
        <div class="layui-input-block">
            <input type="text" name="patientAddress" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机号码</label>
        <div class="layui-input-block">
            <input type="text" name="patientMobile" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>





    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<%--挂号的弹出层--%>
<form class="layui-form" action="" style="display: none" id="registerForm" lay-filter="registerForm">
    <input type="hidden" name="patientId">
    <div class="layui-form-item">
        <label class="layui-form-label">编号</label>
        <div class="layui-input-block">
            <input type="text" name="triagePatientId" readonly required  lay-verify="required" placeholder="请输入编号" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">患者名字</label>
        <div class="layui-input-block">
            <input type="text" name="patientName" required  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">选择科室</label>
        <div class="layui-input-block">
            <select name="triageDepartmentId" lay-verify="required" id="select">

            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="register">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</body>
</html>
